<template>
  <div>
    <el-form ref="form" :model="model" :rules="props.rules">
      <el-form-item required prop="username">
        <el-input v-model="model.username" size="large" placeholder="请输入帐号">
          <el-icon type="user" :style="{ color: 'rgba(0,0,0,.25)' }"/>
        </el-input>
      </el-form-item>
      <el-form-item required prop="password">
        <el-input v-model="model.password" size="large" type="password" autocomplete="false" placeholder="请输入密码">
          <el-icon type="lock" :style="{ color: 'rgba(0,0,0,.25)' }"/>
        </el-input>
      </el-form-item>
      <el-row :gutter="0">
        <el-col :span="16">
          <el-form-item prop="checkCode">
            <el-input v-model="model.checkCode" size="large" type="text" placeholder="请输入验证码">
              <el-icon type="smile" :style="{ color: 'rgba(0,0,0,.25)' }"/>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" style="text-align: right">
          <img alt="" v-if="props.validCode" style="margin-top: 2px;" :src="props.codeImage" @click="handleChangeCheckCode"/>
          <img alt="" v-else style="margin-top: 2px;" src="../../assets/checkcode.png" @click="handleChangeCheckCode"/>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import {ref} from "vue";

const form = ref();
const model: any = ref({});

const props = withDefaults(defineProps<{
  rules: any,
  validCode?: any,
  codeImage?: any,
}>(), {});

const handleChangeCheckCode = () => {

}

const loginParams = async () => {
  const valid = await form.value?.validate();
  if (valid) {
    return model.value;
  } else {
    return undefined;
  }
}

defineExpose({
  loginParams
});

</script>

<style scoped>

</style>